<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击显示不同位置的点</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div><canvas id="canvas" width="400" height="400"></canvas></div>

    <script type="text/javascript">
        /**
         * @description: 生成webgl着色器对象的程序
         * @param {*} gl gl的上下文对象；ctx.getContext('webgl')
         * @param {*} VERTEX_SHADER_SOURCE；顶点着色器源码
         * @param {*} FRAGMENT_SHADER_SOURCE；片元着色器源码
         * @return {*} 程序对象
         */
        function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

            gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码
            gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码

            // 编译着色器
            gl.compileShader(vertexShader)
            gl.compileShader(fragmentShader)

            // 创建一个程序对象
            const program = gl.createProgram();

            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)

            gl.linkProgram(program)

            gl.useProgram(program)

            return program;
        }

        // 获取canvas元素
        const ctx = document.getElementById('canvas')

        // 获取webgl绘图上下文
        const gl = ctx.getContext('webgl')

        // // 顶点着色器代码
        const VERTEX_SHADER = `
            attribute vec4 aPosition;
            attribute float aPosSize;
            void main(){
                gl_Position = aPosition;
                gl_PointSize = aPosSize;
            }
        `;

        // 片元着色器代码
        const FRAGMENT_SHADER = `
            void main(){
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `;

        let program = initShader(gl, VERTEX_SHADER, FRAGMENT_SHADER);
        let aPos = gl.getAttribLocation(program, 'aPosition');
        let aSize = gl.getAttribLocation(program, 'aPosSize');

        ctx.addEventListener("mousedown", (e)=>{
            clickEvent(e, gl, ctx, aPos);
        })

        let x = 0.0;
        gl.vertexAttrib1f(aSize, 6);
        
        
        let g_points = [];
        const clickEvent = (e, gl, canvas, aPosition)=>{
            let x = e.clientX;
            let y = e.clientY;
            let rect = e.target.getBoundingClientRect();

            // 坐标值转为 0-1之间数值
            x = ((x - rect.left) - canvas.height/2)/(canvas.height/2);
            y = (canvas.width/2 - (y - rect.top))/(canvas.width/2);

            g_points.push(x); g_points.push(y);

            let len = g_points.length;
            for(let i = 0; i < len; i += 2){
                gl.vertexAttrib2f(aPosition, g_points[i], g_points[i+1]);
                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }


    </script>
</body>

</html>